<!--
* @Description: 用户信息 - 表单
* @Author: DHL
* @Date: 2022-04-02 14:02:17
 * @LastEditors: DHL
 * @LastEditTime: 2022-11-01 10:21:39
-->
<template>
  <tw-dialog
    v-model="visible"
    :title="title"
    :loading="loading"
    width="800px"
    height="600px"
    @close="handleClose"
  >
    <el-form
      ref="dbFormRef"
      :model="dbForm"
      :rules="rules"
      label-width="100px"
      :disabled="action === 'view'"
    >
      <el-tabs v-model="state.activeName">
        <el-tab-pane label="基础信息" name="basic">
          <el-row>
            <el-col :span="24">
              <el-form-item label="机构" prop="orgId">
                <el-cascader
                  v-model="state.orgId"
                  :options="orgTreeData"
                  :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                  filterable
                  clearable
                  placeholder="请选择机构"
                  @change="handleChangeOrg"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
            </el-col>

            <el-col :span="24">
              <el-form-item label="登陆名称" prop="loginName">
                <el-input
                  v-model="dbForm.loginName"
                  clearable
                  placeholder="请输入登陆名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="用户类型" prop="userType">
                <el-select v-model="dbForm.userType" clearable placeholder="请选择用户类型">
                  <tw-dic dicKey="USERTYPE"></tw-dic>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="用户状态" prop="status">
                <el-select v-model="dbForm.status" clearable placeholder="请选择用户状态">
                  <tw-dic dicKey="USER_STATUS"></tw-dic>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="dbForm.name" clearable placeholder="请输入姓名"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="dbForm.phone" clearable placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="mail">
                <el-input v-model="dbForm.mail" clearable placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="职务" prop="position">
                <el-input v-model="dbForm.position" clearable placeholder="请输入职务"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="12">
              <el-form-item label="直属主管" prop="directSupervisor">
                <el-select-v2
                  v-model="dbForm.directSupervisor"
                  filterable
                  :options="directSupervisorList"
                  placeholder="请选择直属主管"
                  value-key="value.id"
                  style="width: 100%"
                >
                  <template #default="{ item }">
                    <span style="margin-right: 8px">{{ item.value.name }}</span>
                    <span style="color: var(--el-text-color-secondary); font-size: 13px">
                      {{ item.value.orgName }}
                    </span>
                  </template>
                </el-select-v2>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="24" class="role-container">
              <el-table
                :data="dbForm.roles"
                border
                stripe
                headerCellClassName="header-cell"
                style="width: 100%"
              >
                <el-table-column prop="orgName" label="组织机构">
                  <template #default="scope">
                    <template v-if="scope.row.action === 'add'">
                      <el-cascader
                        v-model="scope.row.orgId"
                        :options="orgTreeData"
                        :props="{
                          checkStrictly: true,
                          value: 'id',
                          label: 'name',
                          children: 'children'
                        }"
                        filterable
                        clearable
                        placeholder="请选择机构"
                        @change="handleChangeRoleOrg"
                      />
                    </template>
                    <template v-else>
                      {{ scope.row.orgName }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="roleName" label="角色">
                  <template #default="scope">
                    <template v-if="scope.row.action === 'add'">
                      <el-select
                        v-model="scope.row.roleId"
                        filterable
                        clearable
                        placeholder="请选择角色"
                      >
                        <el-option
                          v-for="item in roleList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </template>
                    <template v-else>
                      {{ scope.row.roleName }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" width="80">
                  <template #default="scope">
                    <el-button
                      text
                      type="primary"
                      v-if="scope.row.action === 'add'"
                      @click="handleAddRole(scope.row)"
                    >
                      增加
                    </el-button>
                    <el-button
                      text
                      type="danger"
                      v-if="scope.row.action === 'delete'"
                      @click="handleDeleteRole(scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>

            <el-col :span="24">
              <el-divider />
            </el-col>
            <el-col :span="24" class="role-container">
              <el-table
                :data="dbForm.posts"
                border
                stripe
                headerCellClassName="header-cell"
                style="width: 100%"
              >
                <el-table-column prop="orgName" label="组织机构">
                  <template #default="scope">
                    <template v-if="scope.row.action === 'add'">
                      <el-cascader
                        v-model="scope.row.orgId"
                        :options="orgTreeData"
                        :props="{
                          checkStrictly: true,
                          value: 'id',
                          label: 'name',
                          children: 'children'
                        }"
                        filterable
                        clearable
                        placeholder="请选择机构"
                        @change="handleChangeRoleOrg"
                      />
                    </template>
                    <template v-else>
                      {{ scope.row.orgName }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="postName" label="岗位">
                  <template #default="scope">
                    <template v-if="scope.row.action === 'add'">
                      <el-select
                        v-model="scope.row.postId"
                        filterable
                        clearable
                        placeholder="请选择岗位"
                      >
                        <el-option
                          v-for="item in postList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </template>
                    <template v-else>
                      {{ scope.row.postName }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" width="80">
                  <template #default="scope">
                    <el-button
                      text
                      type="primary"
                      v-if="scope.row.action === 'add'"
                      @click="handleAddPost(scope.row)"
                    >
                      增加
                    </el-button>
                    <el-button
                      text
                      type="danger"
                      v-if="scope.row.action === 'delete'"
                      @click="handleDeletePost(scope.row)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="更多信息" name="more">
          <el-row>
            <el-col :span="24">
              <el-form-item label="企业微信用户" prop="cpUserId" label-width="150px">
                <el-input
                  v-model="dbForm.cpUserId"
                  clearable
                  placeholder="请输入企业微信用户"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="APP客户端标识" prop="clientId" label-width="150px">
                <el-input
                  v-model="dbForm.clientId"
                  clearable
                  placeholder="请输入APP客户端标识"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <template #footer>
      <el-button @click="handleReset(true)">取 消</el-button>
      <el-button v-if="action === 'add'" type="warning" @click="handleSubmit(true)">
        提交并继续
      </el-button>
      <el-button v-if="action !== 'view'" type="primary" @click="handleSubmit(false)">
        提 交
      </el-button>
    </template>
  </tw-dialog>
</template>

<script src="./useForm.ts"></script>

<style scoped lang="scss">
  .el-divider--horizontal {
    margin: 0px 0px 20px;
  }
</style>

<style lang="scss">
  .role-container {
    padding: 0px 20px 20px 20px;

    .header-cell {
      font-weight: 400;
      color: var(--el-text-color-regular);
    }
  }
</style>
